<template>
  <div id="wK_historySearch" class="wk_historySearch">
    <h3 class="h3">运维任务查询</h3>
    <a-form-model :model="form" :colon="false" style="margin:10px 0">
      <a-row style="display: flex;align-items: center;">
        <a-col :span="5">
          <a-form-model-item label="任务名称">
            <a-input v-model="form.name" />
          </a-form-model-item>
        </a-col>
        <a-col :span="4" style="margin-left:20px;">
          <a-form-model-item label="任务状态" class="from-item__class" :wrapper-col="{span:17}">
            <a-select v-model="form.region" placeholder="请选择任务状态" allow-clear>
              <a-select-option value="1">未开始</a-select-option>
              <a-select-option value="2">进行中</a-select-option>
              <a-select-option value="3">已完成</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="4" style="display: flex;justify-content: space-between;">
          <a-button
            style="letter-spacing: 8px;"
            @click="onSubmit"
            class="sousuobtn btn-style__class"
          >查询</a-button>
        </a-col>
        <a-col>
          <span class="download-btn">
            <!-- <a-icon type="cloud-download" />导出数据 -->
          </span>
        </a-col>
      </a-row>
    </a-form-model>
    <div class="tableclass">
      <a-table style="height:94%" :data-source="data" :pagination="false" :columns="columns">
        <template slot="operate" slot-scope="text,operate">
          <div class="handle">
            <span style="margin-left: 65px;" @click="showModal(operate)">指令详情</span>
          </div>
        </template>
      </a-table>
      <div class="content-bottom clearfix">
        <div class="page-box">
          <!-- <a-button class="sousuobtn btn-style__class" style="float:left;margin-left: -212%;">自定义查询</a-button> -->
          <a-pagination
            :show-total="total => `共 ${total} 条记录`"
            v-model="form.current"
            :total="total"
            :defaultPageSize="form.size"
            :item-render="itemRender"
            @change="pagechangeFn"
            hideOnSinglePage
          />
        </div>
      </div>
      <!-- 指令详情弹窗 -->
      <a-modal
        title="指令详情"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        :footer="null"
      >
        <a-form-model
          class="xqmodal"
          :form="list"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-form-model-item label="任务名称">{{this.detail.name}}</a-form-model-item>
          <a-form-model-item label="设备类型">{{this.detail.equipmentType}}</a-form-model-item>
          <a-form-model-item label="计划开始时间">{{this.detail.planStartTime}}</a-form-model-item>
          <a-form-model-item label="计划结束时间">{{this.detail.planEndTime}}</a-form-model-item>
          <a-form-model-item label="任务区域">{{this.detail.taskArea}}</a-form-model-item>
          <a-form-model-item label="设备总数">{{this.detail.equipmentCount}}</a-form-model-item>
          <a-form-model-item label="设备类型">{{this.detail.equipmentType}}</a-form-model-item>
          <a-form-model-item label="备注">{{this.detail.note}}</a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import eventBush from "@/eventBush";
export default {
  name: "index",

  data() {
    return {
      title: "",
      equipmentData: {},
      endOpen: false,
      //详情弹出框
      visible: false,
      confirmLoading: false,
      //详情数据
      detail: [],
      //表格数据
      list: [],
      form: {
        current: 1,
        size: 10,
        name: "",
        regio: "",
      },
      columns: [
        {
          title: "序号",
          dataIndex: "num",
          align: "center",
          customRender: (text, record, index) =>
            `${(this.form.current - 1) * this.form.size + index + 1}`,
        },
        {
          title: "运维公司",
          dataIndex: "companyName",
          align: "center",
        },
        {
          title: "任务名称",
          dataIndex: "name",
          align: "center",
        },
        {
          title: "计划开始时间",
          dataIndex: "planStartTime",
          align: "center",
        },
        {
          title: "计划结束时间",
          dataIndex: "planEndTime",
          align: "center",
        },

        {
          title: "操作",
          align: "center",
          scopedSlots: { customRender: "operate" },
          width: "15%",
        },
      ],
      data: [],
      current: 1,
      size: 9,
      total: 0,
      moment,
    };
  },
  methods: {
    //获取数据
    onSubmit() {
      this.getData();
    },
    //获取页面数据
    getData() {
      this.$api.Api_findByPage(this.form).then((res) => {
        this.data = res.data.data;
        this.data.forEach((item) => {
          if (item.planStartTime === null) {
            item.planStartTime = "";
          } else {
            item.planStartTime = moment(item.planStartTime).format(
              "YYYY/MM/DD hh:mm:ss"
            );
          }
          if (this.planEndTime === null) {
            item.planEndTime = "";
          } else {
            item.planEndTime = moment(item.planEndTime).format(
              "YYYY/MM/DD hh:mm:ss"
            );
          }
        });

        this.total = res.data.total;
      });
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.form.current = page;
      this.getData();
    },
    //弹出框方法,查看详情
    showModal(data) {
      // console.log(data)
      this.detail = data;
      this.visible = true;
      let id = data.id;
      // this.$api.Api_findByPage.then((res) => {
      //   if (res.status == 200) {
      //     this.onSubmit();
      //   }
      // });
    },
    //弹出框关闭
    handleOk() {},
    //关闭弹窗
    handleCancel(e) {
      console.log("点击关闭按钮");
      this.visible = false;
    },
  },

  mounted() {
    this.getData();
    eventBush.$on("onFrom", (a) => {
      this.isshow = a;
    });
  },
};
</script>
<style scoped lang="scss">
/* 导出按钮 */
.download-btn {
  margin-right: 40px !important;
  color: #2c6a5f;
  cursor: pointer;
  font-size: 16px;
  height: 100%;
  padding-top: 1%;
}

#wK_historySearch {
  width: 98%;
  height: 98%;
  padding: 2%;
  box-sizing: border-box;
  position: relative;
  .sousuobtn {
    background-color: #207064;
    border-color: #207064;
  }
  .exportbtn {
    background-color: transparent;
    border: 0;
    color: #207064;
  }
  .content-bottom {
    width: 100%;
    position: absolute;
    bottom: 4%;
    right: 2%;
  }
  .page-box {
    float: right;
  }
  /* 图表 */
  .echarts-box {
    height: 85%;
    width: 100%;
  }
  .line-echarts {
    height: 90%;
  }
  .echarts-title {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
  }
}

::v-deep#wK_historySearch .ant-form-item {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

::v-deep#wK_historySearch .ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 表格样式 */
.tableclass {
  width: 100%;
  height: 86%;
}
.handle {
  width: 100%;
  color: #207064;
  display: flex;
  justify-content: space-between;
}
.handle > span:hover {
  cursor: pointer;
  color: aquamarine;
}

::v-deep#wK_historySearch .ant-table table {
  height: auto;
  border-radius: 0;
  border-left: 1px solid #207064;
  border-right: 1px solid #207064;
}

::v-deep#wK_historySearch .ant-table-thead > tr > th {
  line-height: 22px;
  border-bottom: 0;
  border-radius: 0;
}
::v-deep#wK_historySearch .ant-table-tbody > tr > td {
  border-bottom: 1px solid #2c6a60;
}
// 分页
::v-deep#wK_historySearch .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
//查询按钮
::v-deep.ant-col-4 {
  margin-left: 560px;
}
.ant-form-item {
  color: #bebebe;
}
</style>
